<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../../plugins/myAxios'
import { useRouter } from 'vue-router'

const router = useRouter()

// 数据定义
const subjectList = ref([]) // 科目列表
const chapterList = ref([]) // 章节列表
const questionTypeList = ref([
  { value: 1, label: '选择题' },
  { value: 2, label: '综合题' }
])
const questionCategoryList = ref([
  { value: 1, label: '普通题' },
  { value: 2, label: '真题' }
])

// 选择状态
const selectedSubject = ref(null)
const selectedChapter = ref(null)
const selectedType = ref(null)
const selectedCategory = ref(null)

// 加载状态
const loading = ref(false)

// 添加题目列表相关数据
const questionList = ref([])
const showQuestionList = ref(false)

// 监听科目选择变化
watch(selectedSubject, async (newVal) => {
  if (newVal) {
    await fetchChapterList(newVal)
    selectedChapter.value = null
  } else {
    chapterList.value = []
  }
})

// 获取科目列表
const fetchSubjectList = async () => {
  try {
    loading.value = true
    subjectList.value = await myAxios.get('/teacher/researchInfo/subject/list')
  } catch (error) {
    ElMessage.error('获取科目列表失败：' + error)
  } finally {
    loading.value = false
  }
}

// 获取章节列表
const fetchChapterList = async (subjectId) => {
  try {
    loading.value = true
    chapterList.value = await myAxios.get(`/teacher/researchInfo/chapter/getBySubject/${subjectId}`)
  } catch (error) {
    ElMessage.error('获取章节列表失败：' + error)
  } finally {
    loading.value = false
  }
}

// 开始答题
const handleStartAnswer = () => {
  if (!selectedChapter.value || !selectedType.value || !selectedCategory.value) {
    ElMessage.warning('请选择完整的题目信息')
    return
  }

  router.push({
    path: '/question/answer',
    query: {
      chapterId: selectedChapter.value,
      questionType: selectedType.value,
      questionCategory: selectedCategory.value
    }
  })
}

// 添加获取题目列表方法
const fetchQuestionList = async () => {
  try {
    loading.value = true
    const params = {
      chapterId: selectedChapter.value,
      questionType: selectedType.value,
      questionCategory: selectedCategory.value
    }
    questionList.value = await myAxios.get('/student/examination/question/list', { params })
    showQuestionList.value = true
  } catch (error) {
    ElMessage.error('获取题目列表失败：' + error)
  } finally {
    loading.value = false
  }
}

// 添加查询方法
const handleQuery = async () => {
  if (!selectedChapter.value || !selectedType.value || !selectedCategory.value) {
    ElMessage.warning('请选择完整的题目信息')
    return
  }
  await fetchQuestionList()
}

// 页面加载时获取科目列表
onMounted(async () => {
  await fetchSubjectList()
})
</script>

<template>
  <div class="student-question-container">
    <div class="content-wrapper">
      <!-- 左侧选择区域 -->
      <el-card class="selection-card">
        <template #header>
          <div class="card-header">
            <span class="title">选择题目</span>
          </div>
        </template>

        <el-form label-width="100px" class="selection-form">
          <el-form-item label="选择科目">
            <el-select
              v-model="selectedSubject"
              placeholder="请选择科目"
              style="width: 100%">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="选择章节">
            <el-select
              v-model="selectedChapter"
              placeholder="请选择章节"
              :disabled="!selectedSubject"
              style="width: 100%">
              <el-option
                v-for="item in chapterList"
                :key="item.id"
                :label="item.chapterName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="题目类型">
            <el-select
              v-model="selectedType"
              placeholder="请选择题目类型"
              :disabled="!selectedChapter"
              style="width: 100%">
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="题目分类">
            <el-select
              v-model="selectedCategory"
              placeholder="请选择题目分类"
              :disabled="!selectedChapter"
              style="width: 100%">
              <el-option
                v-for="item in questionCategoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="handleQuery"
              :disabled="!selectedChapter || !selectedType || !selectedCategory"
              class="query-btn">
              查询题目
            </el-button>
            <el-button
              type="success"
              @click="handleStartAnswer"
              :disabled="!selectedChapter || !selectedType || !selectedCategory"
              class="start-btn">
              开始答题
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 右侧题目列表 -->
      <el-card v-if="showQuestionList" class="question-list-card" v-loading="loading">
        <template #header>
          <div class="card-header">
            <span class="title">题目列表</span>
            <span class="count">共 {{ questionList.length }} 题</span>
          </div>
        </template>

        <el-empty v-if="questionList.length === 0" description="暂无题目" />

        <ul v-else class="question-list">
          <li v-for="(question, index) in questionList" :key="question.id" class="question-item">
            <div class="question-header">
              <span class="question-index">{{ index + 1 }}.</span>
              <span class="question-title">{{ question.title }}</span>
            </div>
            <div class="question-content">{{ question.content }}</div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="less">
.student-question-container {
  padding: 24px;
  min-height: calc(100vh - 100px);
  background-color: #f5f7fa;

  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: flex-start;

    .selection-card {
      flex: 0 0 480px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
      }

      .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #ebeef5;

        .title {
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
        }
      }

      .selection-form {
        padding: 24px 20px;

        :deep(.el-form-item) {
          margin-bottom: 24px;

          .el-form-item__label {
            font-weight: 500;
            color: #2c3e50;
          }
        }

        // 修改按钮容器的样式
        :deep(.el-form-item:last-child) {
          .el-form-item__content {
            display: flex;
            justify-content: space-between;
            gap: 16px;
          }
        }

        .query-btn {
          flex: 1;
          margin-top: 32px;
          height: 44px;
          font-size: 16px;
          font-weight: 500;
        }

        .start-btn {
          flex: 1;
          margin-top: 32px;
          height: 44px;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    .question-list-card {
      flex: 1;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
      }

      .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
        }

        .count {
          color: #606266;
          font-size: 15px;
          font-weight: 500;
        }
      }

      .question-list {
        padding: 12px 0;
        padding-left: 50px;

        .question-item {
          padding: 16px 20px;
          border-bottom: 1px solid #ebeef5;
          transition: all 0.3s;

          &:hover {
            background-color: #f5f7fa;
            padding-left: 24px;
          }

          &:last-child {
            border-bottom: none;
          }

          .question-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .question-index {
              color: #409eff;
              font-weight: 600;
              margin-right: 16px;
              min-width: 28px;
              font-size: 15px;
            }

            .question-title {
              color: #2c3e50;
              font-weight: 500;
              font-size: 15px;
            }
          }

          .question-content {
            color: #606266;
            font-size: 14px;
            line-height: 1.6;
            margin-left: 44px;
            white-space: pre-wrap;
          }
        }
      }
    }
  }
}
</style>
